<template>
  <div class="page-miH page-bgBack">
    <PageHeader @back="goback" subTitle="返回">已离职列表</PageHeader>

    <div class="table m24">
      <a-input-search class="mb24" placeholder="搜索员工姓名" style="width: 180px" v-model="empName" @search="onSearch" />
      <a-button class="fr mr12" type="primary" @click="openEmployeesMove('批量恢复在职')">批量恢复在职</a-button>

      <a-button class="fr mr12" @click="openEmployeesMove('批量删除')">批量删除</a-button>
      <a-table
        :columns="columns"
        :row-key="record => record.id"
        :data-source="data"
        :pagination="pagination"
        size="middle"
        @change="handleTableChange"
      >
        <template slot="operate" slot-scope="text, record">
          <a-button size="small" type="link" @click="detail(record)">查看</a-button>
          <a-divider type="vertical" />
          <a-button size="small" type="link" @click="restore(record)">恢复在职</a-button>
        </template>
      </a-table>
    </div>
    <employeesMoveAdvancedScreening ref="employeesMove" @getNextStep="getNextStep"></employeesMoveAdvancedScreening>
  </div>
</template>
<script>
import { getEmpResignedList, reinstatement, reinstatementUpdate, empInfosDel } from "@/api/staff/staff";
import employeesMoveAdvancedScreening from "./employeesMoveAdvancedScreening";
import { formatDate } from "@/utils/index";
const columns = [
  { title: "姓名", dataIndex: "empName", ellipsis: true, align: "center" },
  { title: "部门", dataIndex: "depName", ellipsis: true, align: "center" },
  { title: "岗位", dataIndex: "positionName", ellipsis: true, align: "center" },
  { title: "手机号", dataIndex: "phone", ellipsis: true, align: "center" },
  {
    title: "离职日期",
    dataIndex: "leaveDate",
    ellipsis: true,
    align: "center",
    customRender: (text, record, index) => {
      return formatDate(text);
    }
  },
  { title: "离职原因", dataIndex: "quitReason" },

  {
    title: "操作",
    dataIndex: "operate",
    scopedSlots: { customRender: "operate" }
  }
];

const pagination = {
  pageSize: 10,
  total: 0,
  size: "default",
  current: 1,
  showTotal: total => `共 ${total} 条`,
  showQuickJumper: true
};

export default {
  name: "LeaveList",
  data() {
    return {
      empName: "",
      companyId: this.$store.state.hr.companyId,
      columns,
      pagination,
      data: [],
      selectedRowKeys: []
    };
  },
  components: { employeesMoveAdvancedScreening },
  created() {
    this.pagination.current = 1;
    this.getEmpInfosData();
  },
  methods: {
    getNextStep(data, state) {
      console.log(data, state);
      this.batchArrData = data;
      if (state === "批量恢复在职") {
        this.getReinstatementUpdate();
      } else if (state === "批量删除") {
        this.getEmpInfosDel();
      }
    },
    getEmpInfosDel() {
      empInfosDel(this.batchArrData.map(i => i.id)).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "操作成功"
        });
        this.getEmpInfosData();
      });
    },
    getReinstatementUpdate() {
      reinstatementUpdate(
        this.batchArrData.map(i => i.id),
        this.$store.state.hr.companyId
      ).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "操作成功"
        });
        this.getEmpInfosData();
      });
    },
    openEmployeesMove(e) {
      // 打开高级筛选
      this.$nextTick(() => {
        this.$refs.employeesMove.showModal(e);
      });
    },
    onSearch() {
      this.pagination.current = 1;
      this.getEmpInfosData();
    },
    restore(record) {
      reinstatement({
        companyId: this.$store.state.hr.companyId,
        empId: record.empId
      }).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "恢复成功"
        });
        this.pagination.current = 1;
        this.getEmpInfosData();
      });
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.getEmpInfosData();
    },
    getEmpInfosData() {
      getEmpResignedList(this.$store.state.hr.companyId, {
        empName: this.empName,
        pageNo: this.pagination.current,
        pageSize: 10
      }).then(res => {
        this.data = res.data.entities;
        this.pagination.total = res.data && res.data.entityCount;
      });
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    goback() {
      this.$router.push({
        path: "/staff/manger?selectId=4"
      });
    },
    detail: function(row) {
      const searchData = {
        companyId: this.$store.state.hr.companyId,
        queryType: 6
      };
      this.$router.push({
        path: "/staff/detail",
        query: {
          id: row.empId,
          userId: row.userId,
          prevpage: location.hash.slice(1)
        }
      });
    }
  }
};
</script>
